<template>
   <div class="search_result">
      <van-list
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
         :error.sync="error"
         error-text="加载失败，请点击重试"
      >
         <van-cell
            v-for="(article, index) in list"
            :key="index"
            :title="article.title"
         />
      </van-list>
   </div>
</template>

<script>
import { getSearchResult } from '@/api/search'
export default {
   name: 'Search_result',
   data() {
      return {
         list: [],
         loading: false,
         finished: false,
         // 初始页码
         page: 1,
         // 每页大小
         perPage: 20,
         // 记载失败的状态
         error: false
      }
   },
   props: {
      searchText: {
         type: String,
         required: true
      }
   },
   methods: {
      async onLoad() {
         try {
            // 1.请求获取数据
            const { data } = await getSearchResult({
               // 页码
               page: this.page,
               // 每页大小
               per_page: this.perPage,
               // 查询关键词
               q: this.searchText
            })
            // 模拟随即失败的情况
            // if (Math.random() > 0.5) {
            //    JSON.parse('sfdgdfgfgf')
            // }
            // console.log(data)
            // 2.将数据添加到数组列表中
            const { results } = data.data
            this.list.push(...results)

            // 3.将本次加载中的loading关闭
            this.loading = false

            // 4.判断是否还有数据
            if (results.length) {
               //   如果有，则更新获取下一个数据的页码
               this.page++
            } else {
               //   如果没有，则将加载状态 finished 设置为结束
               this.finished = true
            }
         } catch (err) {
            // 展示记载失败的提示状态
            this.error = true
            // 加载失败 loading 关闭
            this.loading = false
         }
      }
   }
}
</script>

<style lang="less" scoped></style>
